import React from 'react'
import { useSelector } from 'react-redux';
import { DetailsList, DetailsListLayoutMode, SelectionMode } from '@fluentui/react';

function TaskList() {
    const tasks = useSelector(state => state.tasks);
    const users = useSelector(state => state.users);

    const columns = [
        { key: 'id', name: 'ID', fieldName: 'id', minWidth: 50 },
        { key: 'title', name: 'Title', fieldName: 'title', minWidth: 150 },
        { key: 'assignee', name: 'Assignee', minWidth: 100, onRender: (item) => users.find(u => u.id === item.assignedId)?.name || 'Unassigned' },
    ];

    return (
        <DetailsList
            items={tasks}
            columns={columns}
            layoutMode={DetailsListLayoutMode.justified}
            selectionMode={SelectionMode.none}
        />
    );

}

export default TaskList;